import { View, Text } from '@tarojs/components'
import { Avatar } from '@nutui/nutui-react-taro'
import React from 'react'
import './index.less'

export interface TeamMember {
  /** 姓名 */
  name: string
  /** 职位 */
  position: string
  /** 头像 */
  avatar: string
  /** 描述 */
  description?: string
}

export interface TeamMemberCardProps {
  /** 团队成员信息 */
  member: TeamMember
  /** 点击事件 */
  onClick?: () => void
  /** 自定义类名 */
  className?: string
}

/**
 * TeamMemberCard 团队成员卡片组件
 * 用于展示团队成员信息
 */
const TeamMemberCard: React.FC<TeamMemberCardProps> = ({ member, onClick, className = '' }) => {
  return (
    <View className={`team-member-card ${onClick ? 'clickable' : ''} ${className}`} onClick={onClick}>
      <Avatar src={member.avatar} size='large' className='member-avatar' />
      <View className='member-info'>
        <Text className='member-name'>{member.name}</Text>
        <Text className='member-position'>{member.position}</Text>
        {member.description && <Text className='member-desc'>{member.description}</Text>}
      </View>
    </View>
  )
}

export default TeamMemberCard

